<template>
	<div class="trainTime train">
		<trainHeader :name="name"></trainHeader>
		<div class="trainTime_box" v-if="trainList.length">
			<div class="trainTime_box_header" @click="rotate">
				<div>{{trainNo}}次列车余票</div>
				<div class="trainTime_box_icon" :class="{'active':!isRotate}">
					<img src="http://h5.kpcx179.com/wximages/train/gengduo-zhankai@2x.png" alt="" />
				</div>
			</div>
			<div v-show="isRotate">
				<div class="trainTime_content" v-for="item in trainList" @click="skip(item)">
					<div class="trainTime_content_message">
						<div class="trainTime_list">
							<div class="trainTime_content_msg">
								<!--时间-->
								<div v-for="val in item.stationGroupArr" class="trainTime_content_active trainTime_content_time">
									{{val.departureTime}}
								</div>
							</div>
							<div class="trainTime_content_center">
								<!--轮廓-->
								<div class="trainTime_outline">
									<div v-for="val in item.stationGroupArr" class="trainTime_content_active">
										<div class="trainTime_content_circle"></div>
									</div>
								</div>
								<!--线和多补票-->
								<div class="trainTime_line">
									<template v-if="key<item.stationGroupArr.length-1" v-for="val,key in item.stationGroupArr">
										<div class="trainTime_line_box" v-if="(val.name == 'toStation' || val.name == 'fromStation') || (item.stationGroupArr[key+1].name == 'toStation' || item.stationGroupArr[key+1].name == 'fromStation')">
											<div class="trainTime_solid" v-if="(val.name == 'fromStation') && (item.stationGroupArr[key+1].name == 'toStation')"></div>
											<div class="trainTime_solid" v-else-if="val.name == 'toStation'">
												<span>多买{{item.stationGroupArr[key+1].serialNumber - val.serialNumber}}站</span>
											</div>
											<div class="trainTime_dotted" v-else-if="item.stationGroupArr[key+1].name == 'toStation'">
												<span>补票{{item.stationGroupArr[key+1].serialNumber - val.serialNumber}}站</span>
											</div>
											<div class="trainTime_solid" v-else-if="item.stationGroupArr[key+1].name == 'fromStation'">
												<span>多买{{item.stationGroupArr[key+1].serialNumber - val.serialNumber}}站</span>
											</div>
											<div class="trainTime_solid" v-else></div>
										</div>
									</template>
								</div>
							</div>
							<div class="trainTime_content_msg">
								<!--站-->
								<div v-for="val in item.stationGroupArr" class="trainTime_content_active font_spill">
									{{val.station}}
								</div>
							</div>
						</div>
						<!--票价-->
						<div class="trainTime_price">
							<div>
								<span>￥</span>{{item.smalePrice | filtersPrice}}
							</div>
							<div class="trainTime_return_money">
								返{{item.smalePrice | returnMoney}}
							</div>
						</div>
					</div>
					<!--坐席信息-->
					<div class="trainTime_content_cn">
						<div v-for="val in item.ticketsArr" class="font_spill">
							<div>{{val.cn}}:</div>
							<div>
								<span v-if="val.seats>20">有</span>
								<span v-else-if="val.seats<=0">无</span>
								<span v-else>{{val.seats}}张</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div v-else class="trainTime_null" v-show="isNullShow">
			<img src="http://h5.kpcx179.com/wximages/train/zanwuqujianpiao-@2x.png" alt="" />
			<div class="trainTime_text">{{decodeURIComponent(fromStation)}}-{{decodeURIComponent(toStation)}}的{{trainNo}}次列车，其他站点车票已售完，请查看其他车次或试试抢票。</div>
			<div class="trainTime_btn" @click="eventReturn">查看其它车次</div>
		</div>
	</div>
</template>
<style scoped>
	.trainTime_box {
		margin-top: 20px;
		background-color: #fff;
	}
	
	.trainTime_box_header {
		padding: 20px 30px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32px;
		color: #333333;
	}
	
	.trainTime_box_icon {
		width: 32px;
		height: 17px;
		display: flex;
		transition: all 0.5s;
	}
	
	.trainTime_box_icon.active {
		transform: rotate(-90deg);
	}
	
	.trainTime_box_icon>img {
		width: 100%;
		height: 100%;
	}
	
	.trainTime_content {
		padding: 56px 0px 34px;
		margin: 0 30px;
		height: 266px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		border-bottom: 2px solid #e9e9e9;
	}
	
	.trainTime_content:last-child {
		border-bottom: 0;
	}
	
	.trainTime_content_cn {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	.trainTime_content_cn>div {
		display: flex;
		justify-content: flex-start;
		/*width: 20%;*/
		margin-right: 20px;
		font-size: 24px;
		color: #a8a8a8;
		box-sizing: border-box;
	}
	
	.trainTime_content_message {
		width: 100%;
		height: 120px;
		font-size: 26px;
		color: #333;
		display: flex;
		justify-content: space-between;
	}
	
	.trainTime_content_message>.trainTime_list {
		width: 75%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.trainTime_content_message>.trainTime_price {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-end;
		font-size: 34px;
		color: #fb6523;
	}
	
	.trainTime_content_message>.trainTime_price>div>span {
		font-size: 24px;
	}
	
	.trainTime_return_money {
		padding: 2px 10px;
		border:2px solid #fb6523;
		border-radius: 20px;
		font-size: 26px;
		margin-top: 10px;
		box-sizing: border-box;
	}
	
	.trainTime_content_msg {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	
	.trainTime_content_center {
		width: 100%;
		position: relative;
		top: 30px;
		left: 0;
	}
	
	.trainTime_content_active {
		width: 20%;
		display: flex;
		justify-content: center;
	}
	
	.trainTime_content_active:first-child {
		justify-content: flex-start;
	}
	
	.trainTime_content_active:last-child {
		justify-content: flex-end;
	}
	
	.trainTime_line_box {
		width: 100%;
	}
	
	.trainTime_solid {
		border-top: 2px solid #3ac4c2;
		width: 100%;
		display: flex;
		justify-content: center;
	}
	
	.trainTime_dotted {
		border-top: 2px dotted #3ac4c2;
		width: 100%;
		display: flex;
		justify-content: center;
	}
	
	.trainTime_outline {
		display: flex;
		justify-content: space-between;
	}
	
	.trainTime_content_circle {
		width: 18px;
		height: 18px;
		border-radius: 50%;
		border: 2px solid #3ac4c2;
		position: relative;
		top: -9px;
		background-color: #fff;
		left: 0;
		z-index: 10;
	}
	
	.trainTime_line {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	
	.trainTime_line>div {
		flex: 1;
		display: flex;
		justify-content: center;
		position: relative;
		top: -20px;
		left: 0;
	}
	
	.trainTime_line_box>div>span {
		height: 30px;
		padding: 0 9px;
		border-radius: 15px;
		display: flex;
		justify-content: center;
		align-items: center;
		border: solid 2px #3bc3c2;
		font-size: 22px;
		color: #3bc3c2;
		position: relative;
		top: -16px;
		left: 0;
		background-color: #fff;
	}
	
	.trainTime_content_time {
		font-size: 30px;
	}
	
	.trainTime_null {
		display: flex;
		width: 100%;
		margin-top: 152px;
		flex-direction: column;
		align-items: center;
	}
	
	.trainTime_null>img {
		width: 104px;
		height: 104px;
	}
	
	.trainTime_text {
		font-size: 32px;
		width: 550px;
		text-align: left;
		color: #8a8a8a;
		margin-top: 68px;
		line-height: 40px;
	}
	
	.trainTime_btn {
		margin-top: 178px;
		width: 692px;
		height: 92px;
		background: #3ac4c2;
		color: #fff;
		font-size: 36px;
		text-align: center;
		line-height: 92px;
	}
</style>
<script>
	import trainHeader from "../../../components/trainHeader";
	export default {
		name: "",
		data() { //数据
			return {
				departureDate: "",
				trainNo: "",
				fromStation: "",
				toStation: "",
				isRotate: true, //收起放下
				trainList: [],
				price: "",
				name: "",
				isNullShow: false, //是否展示空
				studentFlag: false,
			}
		},
		components: {
			trainHeader
		},
		mounted() {
			this.departureDate = this.$route.query.departureDate; //日期
			this.studentFlag = Boolean(Number(this.$route.query.studentFlag));
			this.fromStation = this.$route.query.fromStation;
			this.toStation = this.$route.query.toStation;
			this.trainNo = this.$route.query.trainNo;
			this.price = this.$route.query.price;
			this.name = decodeURIComponent(this.fromStation) + "-" + decodeURIComponent(this.toStation);
			this.getMessage();
		},
		created() {

			//			console.log(this.msg,this.departureDate);
		},
		methods: {
			eventReturn() { //查看其它车辆
				this.$router.go(-2);
			},
			rotate() {
				this.isRotate = !this.isRotate;
			},
			getMessage() {
				this.isNullShow = false;
				this.$loading.show();
				var param = {
					fromStation: this.fromStation,
					toStation: this.toStation,
					date: this.departureDate.replace(/-/g, ''),
					trainNo: this.trainNo,
					ticketType: this.studentFlag ? 2 : 1, // 1正常票  2学生票  默认1
				};
				this.$http.post(this.$baseUrl.baseurl + "tctrain/train/getRangeStopOversInfo", param).then((res) => {
					this.$loading.hide();
					this.isNullShow = true;
					//					console.log(res)
					if(res.data.Code == '0') {
						var train = res.data.Result.train;
						train.forEach((val, key) => { //排序
							val.smalePrice = Number(val.smalePrice).toFixed(2);
							var stationGroup = [];
							for(var item in val.stationGroup) {
								if(item != "length") { //获取座位信息
									let obj = val.stationGroup[item];
									// console.log(obj);
									obj.name = item; //添加键名
									stationGroup.push(obj);
								};
							};
							stationGroup.sort((a, b) => { //根据顺序排序
								return a.serialNumber - b.serialNumber;
							});
							train[key].stationGroupArr = stationGroup;
							var ticketsArr = []; //处理座次排序
							for(var item in val.ticketState) { //获取座位信息
								let obj = val.ticketState[item];
								obj.seatClass = item; //添加坐席代号
								ticketsArr.push(obj);
							};
							ticketsArr.sort((a, b) => { //根据价格排序
								var a = a.lowestPrice || a.price;
								var b = b.lowestPrice || b.price;
								return b - a;
							});
							if(ticketsArr.length) { //处理无座和硬座/二等座价格相同的情况
								var flag = (ticketsArr[ticketsArr.length - 1].cn == "硬座" || ticketsArr[ticketsArr.length - 1].cn == "二等座") && (ticketsArr[ticketsArr.length - 2].cn == "无座");
								if(flag) {
									let obj = ticketsArr[ticketsArr.length - 2];
									ticketsArr[ticketsArr.length - 2] = ticketsArr[ticketsArr.length - 1];
									ticketsArr[ticketsArr.length - 1] = obj;
								};
							};
							val.ticketsArr = ticketsArr;
						});
						this.trainList = train;
					} else {
						this.$toast(res.data.msg, {
							durtaion: 200,
							location: 'center',
						});
					};
				}).catch((err) => {
					this.$loading.hide();
					this.isNullShow = true;
					console.log(err);
				});
			},
			skip(msg) {
				var endStation = msg.toCity; //终点站
				//				msg.stationGroup.toStation || msg.stationGroup.beginTo || 
				var startStation = msg.fromCity; //出发站
				//			     || msg.stationGroup.fromStation
				var price = (Number(msg.smalePrice) - Number(this.price)).toFixed(1);
				var sectionObj = { //提示信息
					fromStation: startStation, //出发站
					endStation: endStation, //到达站
					toStation: msg.stationGroup.toStation.station, //目的地
					fromCity: msg.stationGroup.fromStation.station, //上车站
					price: (price > 0) ? price : "", //差价
				};
				msg.fromStation = msg.toCity;
				msg.toStation = msg.toStation;
				var trainStore = JSON.parse(JSON.stringify(this.$store.state.train.trainStore));
				trainStore.trainSeat.msg = msg; //车次信息
				trainStore.trainSeat.sectionObj = sectionObj;
				this.$store.commit('TRAINSTORE', trainStore);
				this.$router.go(-1);
			},
		},
		filters: {
			filtersPrice(price) {
				return Number(price).toFixed(1);
			},
			returnMoney(price) { //返现
				//该公式在价格为1.4时计算基本为0但由于保留一位小数所以在计算得0.09时也展示为0，因此判断为3.6时展示为0.1;
				var money = (price / (20 + price / 50) * (Math.log(price) / Math.log(10))).toFixed(3);
				money = money.substring(0, money.length - 2);
				(money.substring(money.length - 1) == 0) && (money = money.substring(0, money.length - 1));
				money = +money;
				(money > 30) && (money = 30);
				return money;
			},
		}
	};
</script>